<template>
	<div class="fdiscc">
		<div class="form-con fdisr">
			<div class="title">
				基础套餐<span style="color: orangered; font-weight: bolder">￥{{ getPlanPrice(basePlan) }}</span>
			</div>
			<div class="operation" v-if="false">
				<el-button type="primary" @click="editPlan">自定义方案</el-button>
			</div>
			<el-card v-for="room in basePlan" class="custom-room">
				<div class="room-con fdisc">
					<div class="name">{{ room.roomName }}</div>
					<div class="fdisr device" v-for="item in room.equipments">
						<div class="block-name">{{ item.name }}</div>
						<div class="block-price">{{ item.price }}</div>
					</div>
					<div class="price-con">
						{{ getRoomPrice(room.equipments) }}
					</div>
				</div>
			</el-card>
		</div>

		<div class="form-con fdisr" v-if="showCustomPlan">
			<div class="title">
				自定义方案<span style="color: orangered; font-weight: bolder">￥{{ getPlanPrice(customPlan) }}</span>
			</div>
			<div class="operation">
				<el-button type="primary" @click="addRoom">添加房间</el-button>
			</div>
			<el-card v-for="(room, roomIndex) in customPlan" class="custom-room">
				<div class="room-con fdisc">
					<div class="name fdisr">
						<el-input v-if="room.appended" v-model="room.roomName" placeholder="请输入房间名称"></el-input>
						<div v-else>{{ room.roomName }}</div>
					</div>
					<div class="fdisr device" v-for="(item, dindex) in room.equipments">
						<div class="block-name" @click="goDetail(item.link)">{{ item.name }}</div>
						<div class="fdisr">
							<div class="block-price" style="margin-right: 10px">{{ item.price }}</div>

							<el-button type="danger" :icon="Delete" circle size="small" @click="deleteDevice(roomIndex, dindex)"></el-button>
						</div>
					</div>
					<div class="fdisrc" style="margin-top: 10px     ;">
						<el-button type="primary" @click="addDevice(roomIndex)">添加设备</el-button>
					</div>
					<div class="price-con">
						{{ getRoomPrice(room.equipments) }}
					</div>
				</div>
			</el-card>
		</div>

		<el-dialog title="添加房间" v-model="showPlanForm" width="60%" :before-close="handleClose">
			<div style="width: 100%; height: 400px">
				<el-form :model="planForm" ref="planForm" label-width="120px">
					<el-form-item label="智能插座数量:">
						<el-input-number v-model="planForm.socketCount" :min="0" :max="10"></el-input-number>
					</el-form-item>
					<el-form-item label="智能开关数量:"> </el-form-item>
				</el-form>
			</div>
		</el-dialog>

		<el-dialog title="添加设备" v-model="showDeviceForm" width="60%" :before-close="handleClose">
			<div style="width: 100%">
				<el-form :model="deviceForm" ref="deviceFormRef " label-width="120px" :rules="rules">
					<el-form-item label="设备类型:" style="width: 100%" prop="deviceType">
						<el-select v-model="deviceForm.deviceType" placeholder="请选择设备类型" style="width: 100%" @change="deviceTypeChange">
							<el-option v-for="item in deviceTypeList" :key="item.value" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="设备型号:" prop="deviceName">
						<el-select v-model="deviceForm.deviceName" placeholder="请选择设备型号" style="width: 100%" @change="deviceChange" value-key="type">
							<el-option v-for="item in deviceList" :key="item.type" :label="item.name" :value="item">
								<div>
									{{ item.name }} <span style="color: orangered; font-weight: bolder">￥{{ item.price }}</span>
								</div>
							</el-option>
						</el-select>
						
					</el-form-item>
				</el-form>
			</div>
			<div class="fdisrc">
				<el-button type="primary" @click="handleAddDevice">确定</el-button>
				<el-button @click="closeDeviceForm">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { switchTypeList, sockets, bluetoothGateways, humanBodySensors,smartCrutain, loudspeaker } from "@/utils/smartHouse.js";
import { Delete } from "@element-plus/icons-vue";
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'

let showPlanForm = ref(false);
let showDeviceForm = ref(false);
let planForm = ref({
	socketCount: 2,
	socketType: 1,
	switchCount: 2,
	switchType: 1,
	requireSmartCurtain: false,
});
const deviceFormRef = ref<FormInstance>()
const deviceTypeList = [
	{ name: "智能开关", value: "switch" },
	{ name: "智能插座", value: "socket" },
	{ name: "网关", value: "gateway" },
	{ name: "传感器", value: "sensor" },
	{ name: "智能窗帘", value: "curtain" },
	{ name: "音箱", value: "loudspeaker" },
];

const deviceMap = {
  switch: switchTypeList,
  socket: sockets,
  gateway: bluetoothGateways,
  sensor: humanBodySensors,
  curtain: smartCrutain,
  loudspeaker: loudspeaker
};

let deviceForm = ref({
	deviceType: "switch",
	deviceName: {},
	roomIndex: 0,
});

let deviceList = ref<Array<any>>([]);

const rules ={
	deviceName:[{ required: true, message: '请选择设备型号', trigger: 'blur' },]
}
let basePlan = ref([
	{
		roomName: "客厅",
		equipments: [
			{
				name: "小米米家智能开关(三开)",
				price: 89,
				devicetype: "switch",
				link: "https://www.mi.com/shop/buy/detail?product_id=12950&cfrom=search",
			},

			{ name: "小米智能多模网关2", price: 229, devicetype: "gateway", link: "https://www.mi.com/shop/buy/detail?product_id=16400&cfrom=search" },
			{
				name: "小米小爱音箱",
				link: "https://www.mi.com/shop/buy/detail?product_id=10015&cfrom=search",
				price: 109,
				devicetyep: "loudspeaker",
			},
			{
				name: "小米门窗传感器2",
				price: 49,
				devicetype: "sensor",
				link: "https://www.mi.com/shop/buy/detail?product_id=12665&cfrom=search",
			},
			{
				name: "小米人在传感器",
				price: 149,
				devicetype: "sensor",
				link: "https://www.mi.com/shop/buy/detail?product_id=19994&cfrom=search",
			},
			{
				name: "米家智能窗帘2",
				price: 899,
				link: "https://www.mi.com/shop/buy/detail?product_id=20088&cfrom=search",
				devicetyep: "curtain",
			},
		],
	},
	{
		roomName: "主卧",
		equipments: [
			{ name: "智能插座", type: 1, price: 59 },
			{ name: "智能插座", type: 1, price: 59 },
			{ name: "小米米家智能开关(双开)", type: 1, price: 69, dtype: "switch" },
		],
	},
	{
		roomName: "次卧",
		equipments: [
			{ name: "智能插座", type: 1, price: 59 },
			{ name: "小米米家智能开关(单开)", type: 1, price: 59, dtype: "switch" },
		],
	},
]);

let customPlan = ref<Array<any>>([
	{
		roomName: "客厅",
		equipments: [
			{
				name: "小米米家智能开关(三开)",
				price: 89,
				devicetype: "switch",
				link: "https://www.mi.com/shop/buy/detail?product_id=12950&cfrom=search",
			},

			{ name: "小米智能多模网关2", price: 229, devicetype: "gateway", link: "https://www.mi.com/shop/buy/detail?product_id=16400&cfrom=search" },
			{
				name: "小米小爱音箱",
				link: "https://www.mi.com/shop/buy/detail?product_id=10015&cfrom=search",
				price: 109,
				devicetyep: "loudspeaker",
			},
			{
				name: "小米门窗传感器2",
				price: 49,
				devicetype: "sensor",
				link: "https://www.mi.com/shop/buy/detail?product_id=12665&cfrom=search",
			},
			{
				name: "小米人在传感器",
				price: 149,
				devicetype: "sensor",
				link: "https://www.mi.com/shop/buy/detail?product_id=19994&cfrom=search",
			},
			{
				name: "米家智能窗帘2",
				price: 899,
				link: "https://www.mi.com/shop/buy/detail?product_id=20088&cfrom=search",
				devicetyep: "curtain",
			},
		],
	},
	{
		roomName: "主卧",
		equipments: [
			{ name: "小米米家智能墙壁插座", type: 1, price: 59, link: "https://www.mi.com/shop/buy/detail?product_id=13418&cfrom=search" },
			{ name: "小米米家智能墙壁插座", type: 1, price: 59, link: "https://www.mi.com/shop/buy/detail?product_id=13418&cfrom=search" },
			{ name: "小米米家智能开关(双开)", type: 1, price: 69, dtype: "switch", link: "https://www.mi.com/shop/buy/detail?product_id=12950&cfrom=search" },
		],
	},
	{
		roomName: "次卧",
		equipments: [
			{ name: "小米米家智能墙壁插座", type: 1, price: 59, link: "https://www.mi.com/shop/buy/detail?product_id=13418&cfrom=search" },
			{ name: "小米米家智能开关(单开)", type: 1, price: 59, dtype: "switch", link: "https://www.mi.com/shop/buy/detail?product_id=12950&cfrom=search" },
		],
	},
]);

let showCustomPlan = ref(true);

onMounted(() => {
	deviceList.value = switchTypeList
});
function handleClose() {
	showPlanForm.value = false;
	deviceForm.value.deviceName = {};
}

function handleAddDevice() {
	//@ts-ignore
	if(!deviceForm.value.deviceName.name){
		ElMessage.warning("请选择设备型号!");
		return
	}
	customPlan.value[deviceForm.value.roomIndex].equipments.push(deviceForm.value.deviceName);
	showDeviceForm.value = false;
}

function closeDeviceForm() {
	showDeviceForm.value = false;
}

function addRoom() {
	customPlan.value.push({
		roomName: "房间",
		equipments: [],
		appended: true,
	});
}

function goDetail(link: string) {
	window.open(link, "_blank");
}

function addDevice(index: number) {
	deviceForm.value = {
		deviceType: "switch",
		deviceName: {},
		roomIndex: index,
	};
	showDeviceForm.value = true;
}

function deleteDevice(room: number, device: number) {
	customPlan.value[room].equipments.splice(device, 1);
}

function editPlan() {
	customPlan = basePlan;
	showCustomPlan.value = true;
}

function deviceTypeChange(val: any) {
	deviceList.value = deviceMap[val];
	deviceForm.value.deviceName = {};
}

function deviceChange(val: any) {
	//console.log("deviceChange", val);
	
}

function getPlanPrice(list: any[]) {
	let totalPrie = 0;
	for (let item of list) {
		totalPrie += getRoomPrice(item.equipments);
	}

	return totalPrie;
}

function getRoomPrice(list: any[]) {
	if (list.length > 0) {
		let totalPrice = 0;
		for (let device of list) {
			totalPrice += Number(device.price);
		}
		return totalPrice;
	} else {
		return 0;
	}
}
</script>

<style scoped lang="scss">
.form-con {
	width: 96%;
	min-height: 400px;
	border: 2px solid #ccc;
	border-radius: 12px;
	margin-top: 20px;
	color: black;
	flex-wrap: wrap;
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	.title {
		font-size: 24px;
		font-weight: bold;
		width: 100%;
		height: 40px;
		line-height: 40px;
		padding-left: 20px;
		margin-bottom: 20px;
	}
	.custom-room {
		min-width: 400px;
		min-height: 200px;
		margin: 10px 20px;
		.room-con {
			.name {
				font-size: 18px;
				font-weight: bold;
			}

			.device {
				justify-content: space-between;
				height: 30px;
				line-height: 30px;
				.block-name {
					font-size: 16px;
					cursor: pointer;
				}
			}
		}

		.price-con {
			font-size: 20px;
			color: orangered;
			font-weight: bold;
			width: 100%;
			text-align: right;
		}
	}
	.operation {
		width: 100%;
		height: 80px;
		align-items: center;
		padding: 0px 20px;
	}
}
</style>
